<template>
  <view class="container">
    <!-- 标题栏 -->
    <view class="header">
      <text>我的优惠券</text>
    </view>

    <!-- 标签切换 -->
    <view class="tabs">
      <view :class="{'tab': true, 'active-tab': activeTab === '全部'}" @click="switchTab('全部')">全部</view>
      <view :class="{'tab': true, 'active-tab': activeTab === '满减券'}" @click="switchTab('满减券')">满减券</view>
      <view :class="{'tab': true, 'active-tab': activeTab === '兑换券'}" @click="switchTab('兑换券')">兑换券</view>
      <view :class="{'tab': true, 'active-tab': activeTab === '配送券'}" @click="switchTab('配送券')">配送券</view>
    </view>

    <!-- 优惠券列表 -->
    <view class="coupon-list">
      <view class="coupon-item" v-for="coupon in coupons" :key="coupon.id">
        <view class="coupon-left">
          <text class="price">￥{{ coupon.amount }}</text>
          <text class="condition">满{{ coupon.limit }}元可用</text>
        </view>
        <view class="coupon-right">
          <text class="description">{{ coupon.description }}</text>
          <text class="expiry">有效期至 {{ coupon.expiry }}</text>
          <text class="location">{{ coupon.location }}</text>
          <button class="use-btn" @click="useCoupon(coupon.id)">去使用</button>
        </view>
      </view>
    </view>

    <!-- 底部功能区 -->
    <view class="footer">
      <button class="footer-btn">券码兑换</button>
      <button class="footer-btn">领券中心</button>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      activeTab: '满减券',
      coupons: [
        {
          id: 1,
          amount: 20,
          limit: 59,
          description: '精选商品专享券',
          expiry: '2024/11/26 23:59',
          location: '限福州市使用',
        },
        {
          id: 2,
          amount: 10,
          limit: 49,
          description: '精选百货专享券',
          expiry: '今日23:59到期',
          location: '限福州市使用',
        },
        {
          id: 3,
          amount: 64.1,
          limit: 69,
          description: '实惠卡惊喜券',
          expiry: '2024/11/30 23:59',
          location: '全国可用',
        },
      ],
    };
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    },
    useCoupon(id) {
      uni.showToast({
        title: `使用优惠券${id}`,
        icon: 'none',
      });
    },
  },
};
</script>


<style>
.container {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  height: 100vh;
}

.header {
  background-color: #fff;
  padding: 15px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.active-tab {
  color: #ff3f1d;
  border-bottom: 2px solid #ff3f1d;
}

.coupon-list {
  flex: 1;
  padding: 10px;
  background-color: #f5f5f5;
}

.coupon-item {
  display: flex;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.coupon-left {
  flex: 1;
  text-align: center;
  color: #ff4d4f;
  font-size: 16px;
}

.price {
  font-size: 24px;
  font-weight: bold;
}

.condition {
  font-size: 12px;
  color: #999;
}

.coupon-right {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.description {
  font-size: 14px;
  color: #333;
}

.expiry {
  font-size: 12px;
  color: #999;
}

.location {
  font-size: 12px;
  color: #999;
}

.use-btn {
  margin-top: 5px;
  padding: 5px 10px;
  background-color: #ff3f1d;
  color: #fff;
  text-align: center;
  border-radius: 4px;
}

.footer {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.footer-btn {
  flex: 1;
  margin: 0 5px;
  padding: 10px;
  background-color: #007aff;
  color: #fff;
  text-align: center;
  border-radius: 4px;
}
</style>
